<template>
	<view v-if="good_info.goods_name">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in good_info.pics" :key="i" class="Box-img" @click="preview(i)">
				<image :src="item.pics_big" mode=""></image>
			</swiper-item>
			
		</swiper>
		<!-- 商品详细 -->
		<view class="Box-s">
			<!-- 商品价格 -->
			<view class="Box-s-my">
				￥{{good_info.goods_price}}
			</view>
			<!-- 商品信息主体 -->
			<view class="Box-s-zt">
				<!-- 商品介绍 -->
				<view class="Box-s-zt-js">
					{{good_info.goods_name}}
				</view>
				<!-- 商品收藏 -->
				<view class="Box-s-zt-sc">
					<uni-icons type="star" size="30"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费详细 -->
			<view class="Box-s-yf">
				快递:免运费
			</view>
		</view>
		<!-- 商品内容区域 -->
		<view class="box-text">
				<rich-text :nodes="good_info.goods_introduce"></rich-text>
		</view>
		<!-- 导航区域 -->
		<view class="box-dh">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				good_info:{},
				// 商品导航配置文件
				 options: [{
							icon: 'shop',
							text: '店铺',
							infoBackgroundColor:'#007aff',
							infoColor:"red"
						}, {
							icon: 'cart',
							text: '购物车',
							info: 2
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					    ]
			};
		},
		// 生命周期函数
		onLoad(optios){
			console.log(optios);
			const goods_id = optios.goods_id
			this.getGoodsDetail(goods_id)
		},
		// 方法
		methods:{
			// 图片的数据请求事件
			async getGoodsDetail(goods_id) {
			    const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
			    if (res.meta.status !== 200) return uni.$showMsg()
				// 解决图片空白 ios图片适配
				res.message.goods_introduce=res.message.goods_introduce.replace(/<img /g,'<img style="display:block;" ').replace(/webp/g, 'jpg')
			    // 为 data 中的数据赋值
			    this.good_info = res.message
				console.log(res);
			  },
			  // 点击阅览图事件
			  preview(i){
				  uni.previewImage({
				  	current:i,
					urls: this.good_info.pics.map(x => x.pics_big)
				  })
			  },
			  onClick(e){
				  if(e.content.text === '购物车'){
					 uni.switchTab({
					 	url:"../../pages/ShoppingCart/ShoppingCart"
					 })
				  }
				  console.log("uu",e);
			  }
		}
		
	}
</script>

<style lang="scss">
	swiper{
		height: 750rpx;
		image{
			width: 100%;
			height: 100%;
			
		}
	}
	.Box-s{
		padding: 10px;
		.Box-s-my{
			color: #c00000
		}
		.Box-s-zt{
			margin-top: 7px;
			display: flex;
			justify-content: space-between;
			.Box-s-zt-js{
				font-size: 12px;
				margin-right: 15px;
			}
			.Box-s-zt-sc{
				font-size: 12px;
				margin-right: 12px;
				text-align: center;
				text-align: center;
				border-left: solid 1px #efefef;
			}
		}
		.Box-s-yf{
			font-size: 13px
		}
	}
	.box-dh{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
